<template>

  <div>		
  <el-header  height="50px" >
  	<el-menu
  	  :default-active="activeIndex"
  	  router
  	  class="el-menu-demo"
  	  mode="horizontal"
  	  @select="handleSelect"
  	  background-color="#545c64"
  	  text-color="#fff"
  	  active-text-color="#ffd04b"
  	  >
  	  <el-menu-item index="1" class="el-icon-s-home"  @click="$router.push('/')">首页</el-menu-item>
  	  <el-menu-item index="2" @click="$router.push('/Add')">添加表单</el-menu-item>
  	  <el-menu-item index="3" @click="$router.push('FormList')">查看表单</el-menu-item>
  	  <el-menu-item index="4" @click="$router.push('/CollectList')">收藏表单</el-menu-item>
  	</el-menu> 
  </el-header>
    <h1>问卷调查情况</h1>
	<h2>做题人数：{{people}}</h2>
	  <div>
	      <el-radio-group v-model="radio" size="small" @change="changeView(radio)">
	        <el-radio-button label="条形图" value="条形图">条形图</el-radio-button>
	        <el-radio-button label="饼图" value="饼图">饼图</el-radio-button>
	      </el-radio-group>
	    </div>
    <div id="chart_example">
 
    </div>
  </div>
</template>

<script>

  import * as echarts from 'echarts'
	export default {
		name: 'Statistics',
		created() {
			this.getPeopleCounts()
		},
				
/* 		mounted() {
		      let this_ = this;
		      let myChart = echarts.init(document.getElementById('chart_example'));
		      let option = {
		        color: ['#f44'],
		        tooltip : {
		          trigger: 'axis',
		          axisPointer : {
		            type : 'shadow'
		          }
		        },
		        xAxis : [
		          {
		            type : 'category',
		            data : this.optionData,
		            axisTick: {
		              alignWithLabel: true
		            }
		          }
		        ],
		        yAxis : [
		          {
		            type : 'value'
		          }
		        ],
		        series : [
		          {
		            name:'每月花费',
		            type:'bar',
		            barWidth: '60%',
		            data:this.countsData,
		          }
		        ]
		      };
			  option = {
			      title: {
			          text: '某站点用户访问来源',
			          subtext: '纯属虚构',
			          left: 'center'
			      },
			      tooltip: {
			          trigger: 'item',
			          formatter: '{a} <br/>{b} : {c} ({d}%)'
			      },
			      legend: {
			          orient: 'vertical',
			          left: 'left',
			          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
			      },
			      series: [
			          {
			              name: '访问来源',
			              type: 'pie',
			              radius: '55%',
			              center: ['50%', '60%'],
			              data: [
			                  {value: 335, name: '直接访问'},
			                  {value: 310, name: '邮件营销'},
			                  {value: 234, name: '联盟广告'},
			                  {value: 135, name: '视频广告'},
			                  {value: 1548, name: '搜索引擎'}
			              ],
			              emphasis: {
			                  itemStyle: {
			                      shadowBlur: 10,
			                      shadowOffsetX: 0,
			                      shadowColor: 'rgba(0, 0, 0, 0.5)'
			                  }
			              }
			          }
			      ]
			  };
		      myChart.setOption(option);
		 
		      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
		      window.addEventListener('resize',function() {myChart.resize()});
		    }, */

		data() {
			return {
				people:"",
				formId:"",
				optionData:[],
				countsData:[],
				radio:"条形图",
				allData:[],
			}
		},
	methods:{

		async getPeopleCounts(){
			const formId = this.$route.params.formId
			//console.log(formId)
			this.formId=formId
			//console.log(this.formId)
			const {
				data: res
			} = await this.$http.get('statistics?formId='+formId)
			console.log(res)
			this.people=res.peopleCounts;
			for(let i=0;i<res.optionCounts.length;i++){
				//console.log(res.optionCounts[i][0])
				this.optionData[i]=res.optionCounts[i][0]
				this.countsData[i]=res.optionCounts[i][1]
				var data = {
					value:res.optionCounts[i][1],
					name:res.optionCounts[i][0],
				}
				this.allData.push(data)
			}				
			console.log(this.optionData)
			console.log(this.countsData)
			let myChart = echarts.init(document.getElementById('chart_example'));
			let option = {
			  color: ['#f44'],
			  tooltip : {
			    trigger: 'axis',
			    axisPointer : {
			      type : 'shadow'
			    }
			  },
			  xAxis : [
			    {
			      type : 'category',
			      data : this.optionData,
			      axisTick: {
			        alignWithLabel: true
			      }
			    }
			  ],
			  yAxis : [
			    {
			      type : 'value'
			    }
			  ],
			  series : [
			    {
			      name:'选择人数',
			      type:'bar',
			      barWidth: '60%',
			      data:this.countsData,
			    }
			  ]
			};
			myChart.setOption(option);
					 
			//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
			window.addEventListener('resize',function() {myChart.resize()});
		},
		changeView(type){
			console.log(type)
			if(type=="条形图"){
				let myChart = echarts.init(document.getElementById('chart_example'));
				let option = {
				  color: ['#f44'],
				  tooltip : {
				    trigger: 'axis',
				    axisPointer : {
				      type : 'shadow'
				    }
				  },
				  xAxis : [
				    {
				      type : 'category',
				      data : this.optionData,
				      axisTick: {
				        alignWithLabel: true
				      }
				    }
				  ],
				  yAxis : [
				    {
				      type : 'value'
				    }
				  ],
				  series : [
				    {
				      name:'选择人数',
				      type:'bar',
				      barWidth: '60%',
				      data:this.countsData,
				    }
				  ]
				};
				myChart.clear();
				myChart.setOption(option);
						 
				//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
				window.addEventListener('resize',function() {myChart.resize()});
			}
			else if(type=="饼图"){
				let myChart = echarts.init(document.getElementById('chart_example'));
				let option = {
				    title: {
				        text: '用户答题情况',
				        subtext: '纯属虚构',
				        left: 'center'
				    },
				    tooltip: {
				        trigger: 'item',
				        formatter: '{a} <br/>{b} : {c} ({d}%)'
				    },
				    legend: {
				        orient: 'vertical',
				        left: 'left',
				        data: this.optionData,
				    },
				    series: [
				        {
				            name: '答题情况',
				            type: 'pie',
				            radius: '55%',
				            center: ['50%', '60%'],
				            data: this.allData,
				            emphasis: {
				                itemStyle: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				};
				myChart.clear();
				myChart.setOption(option);
			}
		}
	},

	  watch: {
	   '$route': 'getFormId'
	  }
	}
</script>

<style scoped>
	h1{
	   text-align: center;
	   padding: 30px;
	   font-size: 35px;
	 }
	 h2{
	    text-align: center;
	    padding: 30px;
	    font-size: 20px;
		color: #55aaff;
	  }
	  #chart_example{
	    width: 50%;
	    height: 500px;
	    border: 1px solid red;
	    margin: 0 auto;
	  }
</style>
